<template>
  <view class="settings-container">
    <!-- 头部 -->
    <view class="settings-header">
      <view class="header-left" @click="goBack">
        <image src="/static/icon-back.png" class="back-icon" />
      </view>
      <text class="header-title">设置</text>
      <view class="header-right"></view>
    </view>

    <!-- 设置内容 -->
    <scroll-view scroll-y class="settings-content">
      <!-- 账户设置 -->
      <view class="settings-group">
        <view class="group-title">账户设置</view>
        <view class="settings-item" @click="goToUserInfo">
          <view class="item-left">
            <image src="/static/icon-profile.png" class="item-icon" />
            <text>个人信息</text>
          </view>
          <view class="item-right">
            <text class="item-desc">{{ userInfo.username }}</text>
            <image src="/static/icon-arrow-right.png" class="arrow-icon" />
          </view>
        </view>
        
        <view class="settings-item" @click="goToAddress">
          <view class="item-left">
            <image src="/static/icon-address.png" class="item-icon" />
            <text>收货地址</text>
          </view>
          <image src="/static/icon-arrow-right.png" class="arrow-icon" />
        </view>
        
        <view class="settings-item" @click="goToSecurity">
          <view class="item-left">
            <image src="/static/icon-security.png" class="item-icon" />
            <text>账号与安全</text>
          </view>
          <image src="/static/icon-arrow-right.png" class="arrow-icon" />
        </view>
      </view>

      <!-- 消息通知 -->
      <view class="settings-group">
        <view class="group-title">消息通知</view>
        <view class="settings-item">
          <view class="item-left">
            <image src="/static/icon-notification.png" class="item-icon" />
            <text>推送通知</text>
          </view>
          <switch :checked="notificationEnabled" @change="onNotificationChange" color="#007AFF" />
        </view>
        
        <view class="settings-item">
          <view class="item-left">
            <image src="/static/icon-sms.png" class="item-icon" />
            <text>短信提醒</text>
          </view>
          <switch :checked="smsEnabled" @change="onSmsChange" color="#007AFF" />
        </view>
      </view>

      <!-- 隐私设置 -->
      <view class="settings-group">
        <view class="group-title">隐私设置</view>
        <view class="settings-item" @click="goToPrivacy">
          <view class="item-left">
            <image src="/static/icon-privacy.png" class="item-icon" />
            <text>隐私政策</text>
          </view>
          <image src="/static/icon-arrow-right.png" class="arrow-icon" />
        </view>
        
        <view class="settings-item" @click="goToData">
          <view class="item-left">
            <image src="/static/icon-data.png" class="item-icon" />
            <text>数据管理</text>
          </view>
          <image src="/static/icon-arrow-right.png" class="arrow-icon" />
        </view>
      </view>

      <!-- 通用设置 -->
      <view class="settings-group">
        <view class="group-title">通用设置</view>
        <view class="settings-item" @click="goToLanguage">
          <view class="item-left">
            <image src="/static/icon-language.png" class="item-icon" />
            <text>多语言</text>
          </view>
          <view class="item-right">
            <text class="item-desc">简体中文</text>
            <image src="/static/icon-arrow-right.png" class="arrow-icon" />
          </view>
        </view>
        
        <view class="settings-item" @click="goToTheme">
          <view class="item-left">
            <image src="/static/icon-theme.png" class="item-icon" />
            <text>主题设置</text>
          </view>
          <view class="item-right">
            <text class="item-desc">跟随系统</text>
            <image src="/static/icon-arrow-right.png" class="arrow-icon" />
          </view>
        </view>
        
        <view class="settings-item" @click="clearCache">
          <view class="item-left">
            <image src="/static/icon-cache.png" class="item-icon" />
            <text>清除缓存</text>
          </view>
          <view class="item-right">
            <text class="item-desc">{{ cacheSize }}</text>
            <image src="/static/icon-arrow-right.png" class="arrow-icon" />
          </view>
        </view>
      </view>

      <!-- 关于与支持 -->
      <view class="settings-group">
        <view class="group-title">关于与支持</view>
        <view class="settings-item" @click="goToAbout">
          <view class="item-left">
            <image src="/static/icon-about.png" class="item-icon" />
            <text>关于我们</text>
          </view>
          <view class="item-right">
            <text class="item-desc">v{{ appVersion }}</text>
            <image src="/static/icon-arrow-right.png" class="arrow-icon" />
          </view>
        </view>
        
        <view class="settings-item" @click="goToFeedback">
          <view class="item-left">
            <image src="/static/icon-feedback.png" class="item-icon" />
            <text>意见反馈</text>
          </view>
          <image src="/static/icon-arrow-right.png" class="arrow-icon" />
        </view>
        
        <view class="settings-item" @click="checkUpdate">
          <view class="item-left">
            <image src="/static/icon-update.png" class="item-icon" />
            <text>检查更新</text>
          </view>
          <view class="item-right">
            <text v-if="updateAvailable" class="update-badge">有新版本</text>
            <image src="/static/icon-arrow-right.png" class="arrow-icon" />
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-section">
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '图书爱好者'
      },
      notificationEnabled: true,
      smsEnabled: false,
      cacheSize: '125.6MB',
      appVersion: '1.0.0',
      updateAvailable: false
    }
  },
  onLoad() {
    this.loadUserInfo()
    this.loadSettings()
  },
  methods: {
    loadUserInfo() {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = userInfo
      }
    },
    
    loadSettings() {
      const settings = uni.getStorageSync('appSettings') || {}
      this.notificationEnabled = settings.notificationEnabled !== false
      this.smsEnabled = settings.smsEnabled || false
    },
    
    saveSettings() {
      const settings = {
        notificationEnabled: this.notificationEnabled,
        smsEnabled: this.smsEnabled
      }
      uni.setStorageSync('appSettings', settings)
    },

    goBack() {
      uni.navigateBack()
    },

    goToUserInfo() {
      uni.navigateTo({
        url: '/pages/user/userInfo'
      })
    },

    goToAddress() {
      uni.navigateTo({
        url: '/pages/address/address'
      })
    },
    
    goToSecurity() {
      uni.navigateTo({
        url: '/pages/settings/security'
      })
    },
    
    goToPrivacy() {
      uni.navigateTo({
        url: '/pages/settings/privacy'
      })
    },
    
    goToData() {
      uni.navigateTo({
        url: '/pages/settings/data'
      })
    },
    
    goToLanguage() {
      uni.navigateTo({
        url: '/pages/settings/language'
      })
    },
    
    goToTheme() {
      uni.navigateTo({
        url: '/pages/settings/theme'
      })
    },
    
    goToAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    },
    
    goToFeedback() {
      uni.navigateTo({
        url: '/pages/feedback/feedback'
      })
    },

    onNotificationChange(e) {
      this.notificationEnabled = e.detail.value
      this.saveSettings()
      uni.showToast({
        title: this.notificationEnabled ? '推送已开启' : '推送已关闭',
        icon: 'none'
      })
    },

    onSmsChange(e) {
      this.smsEnabled = e.detail.value
      this.saveSettings()
      uni.showToast({
        title: this.smsEnabled ? '短信提醒已开启' : '短信提醒已关闭',
        icon: 'none'
      })
    },

    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        confirmColor: '#ff6b6b',
        success: (res) => {
          if (res.confirm) {
            // 模拟清除缓存
            this.cacheSize = '0.0MB'
            uni.showToast({
              title: '缓存已清除',
              icon: 'success'
            })
          }
        }
      })
    },

    checkUpdate() {
      uni.showLoading({ title: '检查中...' })
      
      setTimeout(() => {
        uni.hideLoading()
        if (this.updateAvailable) {
          uni.showModal({
            title: '发现新版本',
            content: '发现新版本v2.0.0，是否立即更新？',
            confirmText: '立即更新',
            success: (res) => {
              if (res.confirm) {
                this.downloadUpdate()
              }
            }
          })
        } else {
          uni.showToast({
            title: '已是最新版本',
            icon: 'success'
          })
        }
      }, 1500)
    },
    
    downloadUpdate() {
      uni.showLoading({ title: '下载中...' })
      // 实际项目中这里应该调用下载更新逻辑
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '更新下载完成',
          icon: 'success'
        })
      }, 2000)
    },

    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        confirmColor: '#ff6b6b',
        success: (res) => {
          if (res.confirm) {
            this.performLogout()
          }
        }
      })
    },
    
    performLogout() {
      uni.removeStorageSync('token')
      uni.removeStorageSync('userInfo')
      
      uni.showToast({ 
        title: '退出成功', 
        icon: 'success',
        duration: 1500
      })
      
      setTimeout(() => {
        uni.redirectTo({ url: '/pages/login/login' })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left, .header-right {
  width: 80rpx;
}

.back-icon {
  width: 32rpx;
  height: 32rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.settings-content {
  flex: 1;
  padding: 20rpx;
}

.settings-group {
  background: #fff;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.group-title {
  padding: 30rpx;
  font-size: 28rpx;
  color: #999;
  border-bottom: 1rpx solid #f8f8f8;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f8f8f8;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background: #f8f8f8;
  }
}

.item-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.item-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}

.item-right {
  display: flex;
  align-items: center;
}

.item-desc {
  font-size: 26rpx;
  color: #999;
  margin-right: 15rpx;
}

.arrow-icon {
  width: 24rpx;
  height: 24rpx;
}

.update-badge {
  background: #ff6b6b;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  margin-right: 15rpx;
}

.logout-section {
  padding: 40rpx 20rpx;
}

.logout-btn {
  background: #fff;
  color: #ff6b6b;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  border: none;
  
  &:active {
    background: #f8f8f8;
  }
}
</style>
